<template>
	<view class="com-checked y-flex pt-30 pb-30 page-padding-gap"
	:style="{'background-color': bgColor, 'border-top-color': borderColor}" v-if="visible">
		<view class="y-flex y-row y-align-center y-justify-between">
			<text class="fs-32" :style="{color: textColor}" @tap="handleCancel">取消</text>
			<text class="fs-36 fw-bold" :style="{color: titleColor}">已选择{{checkedList.length}}项</text>
			<text class="fs-32" :style="{color: textColor}" @tap="handleCancel">完成</text>
		</view>
		<recycle-list class="com-checked-scroll" for="(item, i) in checkedListSync" v-if="checkedList.length > 0">
		  <cell-slot key="{{i}}">
			  <view class="y-flex y-row y-align-center mt-25">
				  <text class="fs-32 fr-999 y-flex-1">{{item.name}}</text>
				  <text class="fs-32 fr-error" @touchend="check(item)">取消</text>
			  </view>
		  </cell-slot>
		</recycle-list>
		<view class="com-checked-scroll y-flex y-justify-center" v-else>
			<com-empty width="300" size="30" :color="textColor" :text="emptyText"></com-empty>
		</view>
		<view class="y-flex y-row y-align-center mt-30">
			<com-button class="mr-15 y-flex-1" type="primary" plain value="全选" @click="handleCheckAll"></com-button>
			<com-button class="mr-15 y-flex-1" type="warning" plain value="清空" @click="handleCheckClear"></com-button>
			<com-button class="mr-15 y-flex-1" type="success" plain value="反选" @click="handleCheckReverse"></com-button>
			<com-button class="y-flex-1" type="error" plain value="删除" @click="handleCheckDelete"></com-button>
		</view>
		<com-modal :title="modalTitle"
		:content="modalContent"
		:visible.sync="modalShow"
		:bg-color="bgColor"
		:title-color="titleColor"
		:content-color="textColor"
		@confirm="handleModalConfirm"></com-modal>
	</view>
</template>

<script>
	export default {
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			list: {
				type: Array,
				default: () => []
			},
			count: {
				type: [Number, String],
				default: 0
			},
			bgColor: {
				type: String,
				default: '#fff'
			},
			borderColor: {
				type: String,
				default: '#eee'
			},
			titleColor: {
				type: String,
				default: '#333'
			},
			textColor: {
				type: String,
				default: '#999'
			},
			emptyText: {
				type: String,
				default: '暂无选择项'
			},
			keyName: {
				type: String,
				default: 'title'
			},
			keyUnique: {
				type: String,
				default: 'id'
			},
			beforeDelete: {
				type: Function,
				default: () => {}
			}
		},
		computed: {
			checkedListSync () {
				return this.checkedList.map(c => Object.assign({}, c, {name: c[this.keyName]}))
			}
		},
		data () {
			return {
				checkedList: [],
				modalShow: false,
				modalTitle: '',
				modalContent: ''
			}
		},
		methods: {
			handleCancel () {
				this.checkedList = []
				this.$emit('update:visible', false)
				this.$emit('cancel')
			},
			handleChecked () {
				this.toolbarShow = false
				if ( this.list.length == 0 ) {
					uni.showToast({
						title: '没有找到收藏内容哦！',
						icon: 'none'
					})
					return
				}
				this.item = ''
				this.checkedList = []
				this.checkedShow = !this.checkedShow
			},
			check (item) {
				const index = this.checkedList.findIndex(check => check[this.keyUnique] == item[this.keyUnique])
				if ( index > -1 ) this.checkedList.splice(index, 1)
				else this.checkedList.push(item)
			},
			handleCheckAll () {
				this.checkedList = JSON.parse(JSON.stringify(this.list))
			},
			handleCheckClear () {
				this.checkedList = []
			},
			handleCheckReverse () {
				const list = this.list.filter(item => this.checkedList.findIndex(check => check[this.keyUnique] == item[this.keyUnique]) == -1 )
				this.checkedList = list
			},
			handleCheckDelete () {
				if ( this.checkedList.length == 0 ) {
					uni.showToast({
						title: '还没有选择文件哦！',
						icon: 'none'
					})
					return
				}
				this.modalTitle = '友情提示'
				this.modalContent = '删除选中的所有文件？ \n\n点击确认继续'
				this.modalShow = true
			},
			handleModalConfirm () {
				this.beforeDelete(this.checkedList)
				this.handleCancel()
			}
		}
	}
</script>

<style>
	.com-checked {
		border-top-width: 1px;
		border-top-style: solid;
	}
	.com-checked-scroll {
		height: 500rpx;
	}
</style>